<template>
    <div id="storeTpl">
        <el-dialog
        :title="type == 'add' ? '新建门店' : '编辑门店'"
        :visible.sync="dialogVisible"
        class=''
        top="10vh"
        :close-on-click-modal="false"
        :before-close="handleClose"
        >
            <el-form v-model="formData" label-position="right" label-width="100px">
                <el-form-item label="门店名称:">
                    <el-input maxlength="5" size="small" v-model="formData.storeName" placeholder="请填写门店名称" clearable></el-input>
                </el-form-item>
                <el-form-item label="外部仓库:">
                    <el-select size="small" :disabled="type == 'edit' ? true : false" v-model="warehouseObj" clearable filterable>
                        <el-option v-for="(item) in jwarehouseList" :label="item.outerWarehouseName" :value='item.outerWarehouseId +"," + item.outerWarehouseName' :key="item.outerWarehouseId"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="门店类型:">
                    <el-select size="small" v-model="formData.storeType">
                        <el-option v-for="(item, index) in $Options.storeTypes=$Options.storeType" :label="item.label" :value='item.value' :key="index"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="启用停用:" v-if="type== 'edit'">
                    <el-switch
                        class="warehouse"
                        style="display: block"
                        v-model="formData.isLocked"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        active-text="停用"
                        size="small"
                        inactive-text="启用">
                    </el-switch>
                </el-form-item>
                <el-row>
                    <el-col :span="12">
                        <div class="grid-content bg-purple">
                            <el-form-item label="联系人:">
                                <el-input size="small" v-model="formData.personName" maxlength="5" placeholder="请填写门店联系人" clearable></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="grid-content bg-purple">
                            <el-form-item label="联系电话:">
                                <el-input size="small" v-model="formData.mobileNumber" :maxlength="11" placeholder="请填写门店联系电话" clearable></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <provinceAndcity :type="type" :provinceData="provinceData"></provinceAndcity>
                <el-form-item label="门店经度:">
                    <el-input size="small" v-model="formData.lng" placeholder="请填写门店经度" clearable></el-input>
                </el-form-item>
                <el-form-item label="门店纬度:">
                    <el-input size="small" v-model="formData.lat" placeholder="请填写门店纬度" clearable></el-input>
                </el-form-item>
                <el-form-item label="门店介绍:">
                    <el-input size="small" type="textarea" :rows="3" v-model="formData.storeIntro" placeholder="请填写门店介绍" clearable></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="handleClose">取 消</el-button>
                <el-button size="small" type="primary" @click="handleSubmit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import provinceAndcity from '../../commonComponents/provinceAndcity'
export default {
    props: ['type', 'id', 'isShow', 'expressAddressId'],
    components: {provinceAndcity},
    computed: {
        dialogVisible: {
            get() {
                return this.isShow;
            },
            set() {}
        },
        provinceData() {
            return this.$store.state.provinceAndCity;
        }
    },
    data() {
        return {
            formData: {
                storeName: '',
                storeNo: '',
                storeType: 1,
                personName: '',
                mobileNumber: '',
                storeIntro: '',
                lng: '',
                lat: '',
                outerWhId: '',
                isLocked: false,
                expressAddressId: ''
            },
            jwarehouseList: [],
            warehouseObj: null
        }
    },
    mounted() {
        if(this.type == 'edit') {
            this.getStoreDetails()
        }
        this.getJwarehouseList()
    },
    methods: {
        getJwarehouseList() {
            this.$server.storeWarehouseController.getJsterpWarehousesList().then(res => {
                this.jwarehouseList= res.data
            })
        },
        handleClose() {
            this.$confirm('确认关闭？').then(_ => {
                this.$emit('cancelShow', false)
            }).catch(_ => {});
        },
        getStoreDetails() {
            this.$server.storeWarehouseController.getStoreDetails(this.id).then(res => {
                this.formData.expressAddressId= res.data.expressAddressId
                this.formData.isLocked= res.data.isLocked == 0 ? false : true
                this.formData.storeName= res.data.storeName
                this.formData.outerWhId= res.data.outerWhId
                this.formData.storeType= res.data.storeType
                this.formData.mobileNumber= res.data.mobileNumber
                this.formData.personName= res.data.personName
                this.formData.lat= res.data.lat
                this.formData.lng= res.data.lng
                this.formData.storeIntro= res.data.storeIntro
                this.$store.dispatch('changeProvince', res.data.provinceCode +',' +res.data.province)
                this.$store.dispatch('changeCity', res.data.cityCode +',' +res.data.city)
                this.$store.dispatch('changeArea', res.data.districtCode +',' +res.data.district)
                this.$store.dispatch('changeLocalDetails', res.data.addressName)
                if(res.data.outerWhId && res.data.outerWhId != '' && res.data.outerWhName && res.data.outerWhName !='') {
                    this.warehouseObj= res.data.outerWhId+ ',' + res.data.outerWhName
                }
               
            })
        },
        handleSubmit() {
            let {storeName, storeType, personName, mobileNumber, storeIntro, lng, lat, outerWhId, isLocked}= this.formData
            if(mobileNumber && !/^[0-9]{11}$/.test(mobileNumber)) {
                this.$message({
                    message: '联系电话为11位数字',
                    type: 'error',
                    duration: 1500
                })
            }else if(personName == '') {
                this.$message({
                    message: '联系人不能为空',
                    type: 'error',
                    duration: 1500
                })
            }else if(mobileNumber == '') {
                this.$message({
                    message: '联系电话不能为空',
                    type: 'error',
                    duration: 1500
                })
            }else{
                let params= {
                    storeName: storeName,
                    personName: personName,
                    mobileNumber: mobileNumber,
                    lat: lat,
                    lng: lng,
                    storeIntro: storeIntro,
                    provinceCode: +this.provinceData.province.split(',')[0],
                    province: this.provinceData.province.split(',')[1],
                    cityCode: +this.provinceData.city.split(',')[0],
                    city: this.provinceData.city.split(',')[1],
                    districtCode: +this.provinceData.area.split(',')[0],
                    district: this.provinceData.area.split(',')[1],
                    addressName: this.provinceData.localDetails,
                    locateAddress: this.provinceData.province.split(',')[1] + ' ' +this.provinceData.city.split(',')[1] + ' ' + this.provinceData.area.split(',')[1] + ' ' +this.provinceData.localDetails
                }
                if(this.type == 'add') {
                    // params.lat= lat
                    // params.lng= lng
                    params.storeType= storeType,
                    params.outerWhName= this.warehouseObj ? this.warehouseObj.split(',')[1] : ''
                    params.outerWhId= this.warehouseObj ? this.warehouseObj.split(',')[0]  : ''
                    this.$server.storeWarehouseController.createStore(params).then(res => {
                        this.$emit('cancelShow', false)
                        this.$emit('getStoreList')
                    })
                }else{
                    params.expressAddressId= this.expressAddressId
                    params.storeNo= this.id
                    params.isLocked= isLocked == false ? 0 : 1
                    this.$server.storeWarehouseController.editStore(params).then(res => {
                        this.$emit('cancelShow', false)
                        this.$emit('getStoreList')
                    })
                }
            }
            
        }
    }

}
</script>